<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 字符串可以按照数组的方式获取长度，也可以通过索引获取对应的值
        // let str = "今天是周三！"
        // console.log(str);
        // console.log(str.length);
        // console.log(str[1]);   

        // 字符串的常见操作
        // charAt() 获取指定位置的字符
        let str = "What's your name,and your dog name?"
        console.log(str.charAt(5));  // s

        // toUpperCase() 转大写
        console.log(str.toUpperCase()); // WHAT'S YOUR NAME,AND YOUR DOG NAME?

        // toLowerCase() 转小写
        console.log(str.toLowerCase()); // what's your name,and your dog name?

        // replace("被替换的内容", "替换的内容") 替换,只是替换第一个
        console.log(str.replace("your", "us")); // What's us name,and your dog name?

        // replaceAll("被替换的内容", "替换的内容") 替换，替换所有
        console.log(str.replaceAll("your", "us")); // What's us name,and us dog name?

        // trim() 去除字符串两端的空格,不会去除字符串中间的空格
        console.log("    今天   是周   三！    ");
        console.log("    今天   是周   三！    ".trim()); // 今天   是周   三！

        // split() 按照指定的字符进行切割
        console.log("1-2-3-4-a-b-c-d".split("-")); // ['1', '2', '3', '4', 'a', 'b', 'c', 'd']

        // substr() 字符串.substr( 开始索引, 多少个 )
        console.log(str.substr(26, 3)); // dog
        console.log(str);  // What's your name,and your dog name?

        // substring() 字符串.substring( 开始索引, 结束索引 ) 左闭右开
        console.log(str.substring(26, 29)); // dog
        console.log(str); // What's your name,and your dog name?

        // slice() 字符串.slice( 开始索引, 结束索引 ) 左闭右开
        console.log(str.slice(26, 29));
        console.log(str);

        // ``模板字符串,解决了传统字符串拼接变量困难的问题
        let str2 = '今天是周三！';
        let str3 = "今天是周三！";
        let str4 = `今天是周三!`;
        // 示例：
        let arr = ['a', 'b', 'c', 'd']
        for (let index = 0; index < arr.length; index++) {
            // 数字arr在索引为[i]的位置上的值，是arr[i]！
            // console.log("数字arr在索引为[" + index + "]的位置上的值，是" + arr[index] + "！");
            console.log(`数字arr在索引为[${index}]的位置上的值，是${arr[index]}！`);
        }

    </script>
</body>

</html>